<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demo Raphael</title>
    <script src="raphael-min.js"></script>
    <script src="JS/Animation.js"></script>
    <script type="text/javascript" src="samarkan.font.js"></script>
    <script type="text/javascript" src="Motorwerk.font.js"></script>
    <script type="text/javascript" src="adorable.cufonfonts.js"></script>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<fieldset>-->
        <!--<br/>-->
        <!--Choose A Demo: <select name="combo" id="combo"></select>-->
    <!--</fieldset>-->
    <!--<script>-->
        <!--var option = document.createElement("option");-->
        <!--option.text =  option.value = "Animation Delay";-->
        <!--combo.add(option,null);-->
        <!--var option2 = document.createElement("option");;-->
        <!--option2.text = option2.value = "Animation Repeat";-->
        <!--combo.add(option2,null);-->
    <!--</script>-->
</head>
<body>
<script>
    window.onload = function(){
        //Create a table element dynamically

        var paper = Raphael(0,0,2000, 2000);

        var demo ={
            Shapes: function(){

               var _rect = paper.rect(20,20,100,100);
                _rect.attr({fill: "orange"});
                _rect.attr({stroke: "blue"});
               var _ellipse = paper.ellipse(120,130,40,30).attr({fill: "cyan","stroke":"yellow"});
               var _circle = paper.circle(250,250,100).attr("stroke","blue").attr("fill","red");
            },
            Images: function(){

                var banana = paper.image("banana.png",0,0,50,50);
                var zoro =   paper.image("zoro.jpg",200,0,310,200);
                var banana2 = paper.image("banana.png",10,40,300,500);
                var op = paper.image("onepiece.gif",450,100,301,200);
            },
            Path: function(){

                var p1 = paper.path("M10,100L120,120L120,30L90,10Z")
                p1.attr({"stroke-width": 4, fill: "red"});
            },

            Text: function(){

                var txt = paper.text(220,40,"I love you so much!!!\nHaha.Just kidding :)).") ;
                txt.attr({fill: "yellow",stroke: "purple","font-size": 32});

                var font1 = paper.getFont("samarkan normal");
                paper.print(10,100,"Tim Bombadil", font1, 48);
                paper.print(10,200,"Tim Bombadil", font1, 58).
                        attr({"stroke-width": 3, fill: "red", "stroke": "blue"});
            },
            Set: function(){

                var mouth = paper.rect(20,160,200,20).attr({"fill": "yellow"}),
                        eye1 = paper.circle(60,60,30).attr({"fill": "brown"}),
                        eye2 = paper.circle(160,60,30).attr({"fill": "brown"});

                var face1 = paper.set([mouth, eye1, eye2]);

                /* change all shapes of face1 */
                face1.attr({"stroke-width": 4});

                /* clone the entire shape */
                var face2 = face1.clone()
                face2.data("name", "face2");
                face2.attr({"transform": "t200,100R40,200,200"});

                /* now iterate over each set's shape using foreach and animate each of them... */
                var action1 = function(){
                    face2.forEach(function(shape, index){
                        shape.animate({"transform": "..r-120, 200,200"}, 5000, "bounce");
                    })
                };
                setTimeout(action1, 500);
            },

            ShapesMethods: function(){

                var text = paper.text(100,10,"Back - Front:")  ;
                var r1 = paper.rect(60,70,100,130).attr({fill: "blue", "stroke-width": 4});
                var r2 = paper.rect(100,130,120,100).attr({fill: "red", "stroke-width": 4});
                r2.click(function(){
                    this.toBack();
                })    ;
                r1.click(function(){
                    this.toBack();
                })    ;

                var text = paper.text(300,10,"Clone:")  ;
                var r1 = paper.rect(300,100,100,100).attr({fill: "red"});
                r1.click(function(){
                    r1.clone().attr({fill:"orange",transform: "t120,0"})
                });

                var text = paper.text(800,10,"Hide -Show")  ;
                var r = paper.circle(800,80, 50).attr({fill:'#FF0000'}).
                        click(function () { this.hide();g.show(); });;
                var g = paper.circle(900, 80, 50).attr({fill:'#00FF00'}).
                        click(function () { this.hide();r.show(); });
            },
            AnimationDelay:  function(){
                var paper = Raphael(10, 50, 320, 200);
                var anim = Raphael.animation({cx: 10, cy: 20});
                var circle1 = paper.circle(30,10,10);
                var circle2 = paper.circle(50,20,20);
                circle1.animate(anim); // run the given animation immediately
                circle2.animate(anim.delay(5000)); // run the given animation after 500 ms
            }  ,
            AnimationRepeat:  function(){
                var paper = Raphael(10, 50, 320, 200);
                var anim = Raphael.animation({cx: 10, cy: 20}, 2e3);
                var circle1 = paper.circle(30,10,10);
                var circle2 = paper.circle(50,20,20);
                circle1.animate(anim); // run the given animation immediately
                circle2.animate(anim.repeat(5));
            }   ,

            AnimationBasic: function(){

                var circle1 = paper.circle(100,100,40).attr({fill: "red"});
                paper.text(100,100, "CLICKME").attr({"font-size": 22});
                circle1.click(function(evt){
                    circle1.animate({fill: "blue"}, 1000, "bounce");
//                    setTimeout(function(){circle1.pause(); }, 300);
//                    setTimeout(function(){circle1.resume(); }, 2000);
                });

                //Animated with
                var text = paper.text(400,200,"One Piece").
                        attr({stroke:"orange","font-size":"30"}) ;
                text.click(function(){
                    circle1.animate({fill:"red", "stroke-width": 20}, 2000, "bounce");
                    text.animateWith(circle1,null, {"font-size": 60}, 2000, "bounce");
                }) ;

            }   ,
            AnimatingPath: function(){

                var pathStr1 = "M10,20L120,130L110,30Z",
                        pathStr2 = 	"M10,30L400,500T200,40L30,20L100,30L45,60Z";
                var path = paper.path(pathStr1).attr({fill: "red", "stroke-width": 5});
                setTimeout(function(){path.animate({path: pathStr2}, 3000, "linear");}, 1000);
            }     ,
            AnimatingText: function(){
                var font1 = paper.getFont("samarkan normal");
                var text1 = paper.print(100, 100, "Test string", paper.getFont("Myriad", 800), 30),
                        text2 = paper.print(10,200, "ho no no no", font1, 78);
                text2.hide();
                var bb = text1.getBBox();
                var textBg = paper.rect(bb.x, bb.y, bb.width, bb.height)
                        .attr({fill: "blue", opacity: 0.2}).toBack();
                var button1 = paper.set(text1, textBg);
                button1.click(function(e){
                    button1.animate({path: text2.attr("path"), fill: "blue",
                        width: text2.getBBox().width, fill: "red"}, 3000, "linear");

                });
            }  ,
            KeyFrame: function(){

              var text = paper.text(500,200,"I love you!!!").
                      attr({"stroke-width":3,"font-size":80});
              text.click(function(){
                text.animate({"20%": {fill: "red", stroke: "green", easing: "bounce"},
                            "40%": {fill: "blue", stroke: "black"},
                            "60%": {fill: "pink", stroke: "blue"},
                            "80%": {fill: "yellow", stroke: "black"},
                            "100%": {fill: "black", stroke: "green", easing: "bounce"}},6000);
                })  ;
        }
        };


//        var combo = document.getElementsByName("combo");
//        var sel = combo.options[combo.selectedIndex].value;
        var sel = prompt("Enter your choose");
        switch(sel)
        {
            case "AnimationDelay":
                demo.AnimationDelay();
                break;
            case "AnimationRepeat":
                demo.AnimationRepeat();
                break;
            case "AnimationBasic":
                demo.AnimationBasic();
                break;
            case "AnimatingPath":
                demo.AnimatingPath();
                break;
            case "AnimatingText":
                demo.AnimatingText();
                break;
            case "KeyFrame":
                demo.KeyFrame();
                break;
            case "Shapes":
                demo.Shapes();
                break;
            case "Images":
                demo.Images();
                break;
            case "Path":
                demo.Path();
                break;
            case "Text":
                demo.Text();
                break;
            case "Set":
                demo.Set();
                break;
            case "ShapesMethods":
                demo.ShapesMethods();
                break;
        }
    }
</script>
</body>
</html>
